<template>
	<view class="spec__table flex-y">
		<view v-for="item in element" class="flex-x center table__row">
			<view class="item12-4 table__column">{{item.spec_name}}</view>
			<view class="item12-8 table__column" v-for="(item,index) in item.detail">{{item.spec_detail}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			element: Array
		}
	}
</script>

<style>
	.spec__table .table__row {
		width: 80vw;
	}
	
	.spec__table .table__row:first-child {
		border-top: 1rpx solid #CDCDCD;
	}
	
	.spec__table .table__column {
		font-size: 32rpx;
		line-height: 48rpx;
		text-align: center;
		padding: 5rpx;
		border-bottom: 1rpx solid #CDCDCD;
		border-left: 1rpx solid #CDCDCD;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.spec__table .table__column:last-child {
		border-right: 1rpx solid #CDCDCD;
	}
</style>
